<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            user-select: none;
        }
        .box{
            width: 47rem;
            height: 83rem;
        }
        .div1{
            width: 47rem;
            height: 14rem;
            position: relative;
            background-color: rgb(249, 249, 249);
        }
        .d1{
            width: 45rem;
            height: 4rem;
            position: absolute;
            top: 3rem;
            left: 1rem;
            background-color: rgb(227, 227, 229);
            border-radius: 1rem;
            text-align: center;
            line-height: 4rem;
            font-size: 2rem;
        }
        .d4{
            width: 2rem;
            height: 2rem;
            position: absolute;
            top: 0.5rem;
            right: 1rem;
        }
        .img1{
            width: 2rem;
            height: 2rem;
        }
        .d2{
            width: 45rem;
            height: 3rem;
            position: absolute;
            top: 10rem;
            left: 1rem;
        }
        .d3{
            width: 1rem;
            height: 2rem;
            position: absolute;
            left: 1rem;
            top: 0.5rem;
        }
        .img2{
            width: 1rem;
            height: 2rem;
        }
        .p2{
            width: 13rem;
            height: 2rem;
            position: absolute;
            top: 0;
            left: 16rem;
            color: rgb(139, 138, 138);
            font-size: 2rem;
            text-align: center;
        }

        .div2{
            width: 47rem;
            height: 12rem;
            position: relative;
        }
        .p3{
            width: 10rem;
            height: 2rem;
            font-size: 1.4rem;
            color: rgb(139, 138, 138);
            position: absolute;
            top: 2rem;
            left: 1rem;
            line-height: 2rem;
        }
        .d5{
            width: 13rem;
            height: 5rem;
            /* color: red;
            text-align: center;
            line-height: 5rem;
            border: 0.1rem solid red; */
            color: rgb(139, 138, 138);
            text-align: center;
            line-height: 5rem;
            border: 0.1rem solid rgb(139, 138, 138);
            position: absolute;
            top: 6rem;
            left: 1rem;
            font-size: 1.5rem;
        }
        .img3{
            width: 3rem;
            height: 3rem;
            position: absolute;
            top: 0;
            left: 0;
        }
        .d6{
            width: 13rem;
            height: 5rem;
            color: rgb(139, 138, 138);
            text-align: center;
            line-height: 5rem;
            border: 0.1rem solid rgb(139, 138, 138);
            position: absolute;
            top: 6rem;
            left: 16rem;
            font-size: 1.5rem;
        }
        .d001{
            width: 47rem;
            height: 1rem;
            background-color: rgb(249,249,249);
        }

        .div3{
            width: 47rem;
            height: 12rem;
            position: relative;
        }
        .d10{
            width: 16rem;
            height: 5rem;
            color: red;
            text-align: center;
            line-height: 5rem;
            border: 0.1rem solid red;
            /* color: rgb(139, 138, 138);
            text-align: center;
            line-height: 5rem;
            border: 0.1rem solid rgb(139, 138, 138); */
            position: absolute;
            top: 6rem;
            left: 1rem;
            font-size: 1.5rem;
        }

        .div4{
            width: 47rem;
            height: 16rem;
            position: relative;
        }
        .d7{
            width: 43rem;
            height: 9rem;
            position: absolute;
            top: 6rem;
            left: 2rem;
        }
        .i2{
            width: 35rem;
            height: 4rem;
            position: absolute;
            left: 8rem;
            top: 3.5rem;
            font-size: 1.5rem;
        }

        .div5{
            width: 47rem;
            height: 19rem;
            position: relative;
        }
        .p4{
            width: 10rem;
            height: 2rem;
            font-size: 1.2rem;
            position: absolute;
            top: 5rem;
            left: 1rem;
            line-height: 2rem;
        }
        .d8{
            width: 11rem;
            height: 5rem;
            /* color: red;
            text-align: center;
            line-height: 5rem;
            border: 0.1rem solid red; */
            color: rgb(139, 138, 138);
            text-align: center;
            line-height: 5rem;
            border: 0.1rem solid rgb(139, 138, 138);
            position: absolute;
            top: 9rem;
            left: 1rem;
            font-size: 1.5rem;
        }
        .d9{
            width: 11rem;
            height: 5rem;
            color: rgb(139, 138, 138);
            text-align: center;
            line-height: 5rem;
            border: 0.1rem solid rgb(139, 138, 138);
            position: absolute;
            top: 9rem;
            left: 16rem;
            font-size: 1.5rem;
        }
        .p5{
            width: 26rem;
            height: 2rem;
            font-size: 1.2rem;
            line-height: 2rem;
            position: absolute;
            left: 1rem;
            top: 15rem;
        }

        .div6{
            width: 47rem;
            height: 6rem;
            position: relative;
        }
        .d002{
            width: 44rem;
            height: 5rem;
            position: absolute;
            top: 0.5rem;
            left: 1.5rem;
            background-color: red;
            color: white;
            text-align: center;
            line-height: 5rem;
            font-size: 2rem;
        }

        .d003{
            width: 6rem;
            height: 2rem;
            font-size: 1.4rem;
            text-align: right;
            line-height: 2rem;
            position: absolute;
            top: 0;
            left: 0;
        }
        .d004{
            width: 2rem;
            height: 2rem;
            box-sizing: border-box;
            border: 0.1rem solid red;
            border-radius: 50%;
            position: absolute;
            top: 0rem;
            left: 0rem;
        }
        .d005{
            width: 1rem;
            height: 1rem;
            border-radius: 50%;
            position: absolute;
            top: 0.4rem;
            left: 0.4rem;
            background-color: red;
        }
        .d006{
            width: 6rem;
            height: 2rem;
            font-size: 1.4rem;
            text-align: right;
            line-height: 2rem;
            position: absolute;
            top: 4rem;
            left: 0;
        }
        .d007{
            width: 2rem;
            height: 2rem;
            box-sizing: border-box;
            border: 0.1rem solid rgb(139, 138, 138);
            border-radius: 50%;
            position: absolute;
            top: 0rem;
            left: 0rem;
        }
        .d008{
            width: 1rem;
            height: 1rem;
            border-radius: 50%;
            position: absolute;
            top: 0.4rem;
            left: 0.4rem;
            /* background-color: red; */
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="div1">
            <div class="d1">
                    gome.com.cn
                <div class="d4">
                    <img src="img/jian.png" alt="" class="img1">
                </div>
            </div>
            <div class="d2">
                <div class="d3">
                    <img src="img/navleft.png" alt="" class="img2">
                </div>
                <div class="p2">发票信息</div>
            </div>
        </div>

        <div class="div2">
            <div class="p3">发票信息</div>
            <div class="d5">
                需要发票
                <img src="" alt="" class="img3">
            </div>
            <div class="d6">
                暂不需要发票
                <img src="" alt="" class="img3">
            </div>
        </div>

        <div class="d001"></div>

        <div class="div3">
            <div class="p3">发票类型</div>
            <div class="d10">
                普通纸质发票
                <img src="img/yes.png" alt="" class="img3">
            </div>
        </div>

        <div class="d001"></div>

        <div class="div4">
            <div class="p3">发票抬头</div>
            <div class="d7">
                <div class="d003">
                    个人
                    <div class="d004">
                        <div class="d005"></div>
                    </div>
                </div>
                <div class="d006">
                    单位
                    <div class="d007">
                        <div class="d008"></div>
                    </div>
                </div>
                <input type="text" placeholder="请输入单位名称" class="i2">
            </div>
        </div>

        <div class="d001"></div>

        <div class="div5">
            <div class="p3">发票内容</div>
            <div class="p4">选择项目：</div>
            <div class="d8">
                明细
                <img src="" alt="" class="img3">
            </div>
            <div class="d9">
                酒
                <img src="" alt="" class="img3">
            </div>
            <div class="p5">由店铺决定，发票由店铺开具并寄出。</div>
        </div>

        <div class="d001"></div>

        <div class="div6">
            <div class="d002">确定</div>
        </div>
    </div>


    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>

    <script>
        var xinxi;
        var taitou;
        var neirong;

        //移动端匹配
        function setHTML() {
            var baseVal = 16;
            var pageWidth = 750;
            var screenWidth = screen.width;
            var fz = screenWidth * baseVal / pageWidth;
            document.querySelector("html").style.fontSize = fz + "px";
        }
        window.onresize = function () {
            setHTML();
        }

        $(".d5").on("click",function(){
            $(".d6").css({
                color: "rgb(139, 138, 138)",
                border: "0.1rem solid rgb(139, 138, 138)",
            })
            $(".d6 .img3").attr("src","");
            $(".d5").css({
                color: "red",
                border: "0.1rem solid red",
            })
            $(".d5 .img3").attr("src","img/yes.png");
            $(".div3").css("display","block");
            $(".div4").css("display","block");
            $(".div5").css("display","block");
            $(".d001").css("display","block");
            // xinxi = $(".d5").html();
            xinxi = "需要发票"
        })

        $(".d6").on("click",function(){
            $(".d5").css({
                color: "rgb(139, 138, 138)",
                border: "0.1rem solid rgb(139, 138, 138)",
            })
            $(".d5 .img3").attr("src","");
            $(".d6").css({
                color: "red",
                border: "0.1rem solid red",
            })
            $(".d6 .img3").attr("src","img/yes.png");
            $(".div3").css("display","none");
            $(".div4").css("display","none");
            $(".div5").css("display","none");
            $(".d001").css("display","none");
            // xinxi = $(".d6").html();
            xinxi = "暂不需要发票"
            taitou = "无";
            neirong = "无";
        })

        $(".d004").on("click",function(){
            $(".d007").css({
                border: "0.1rem solid rgb(148, 148, 148)",
            })
            $(".d008").css({
                backgroundColor: "transparent",
            })
            $(".d004").css({
                border: "0.1rem solid red",
            })
            $(".d005").css({
                backgroundColor: "red",
            })
            // taitou = $(".d003").html();
            taitou = "个人"
        })

        $(".d007").on("click",function(){
            $(".d004").css({
                border: "0.1rem solid rgb(148, 148, 148)",
            })
            $(".d005").css({
                backgroundColor: "transparent",
            })
            $(".d007").css({
                border: "0.1rem solid red",
            })
            $(".d008").css({
                backgroundColor: "red",
            })
            // taitou = $(".d006").html();
            taitou = "单位"
        })

        $(".d8").on("click",function(){
            $(".d9").css({
                color: "rgb(139, 138, 138)",
                border: "0.1rem solid rgb(139, 138, 138)",
            })
            $(".d9 .img3").attr("src","");
            $(".d8").css({
                color: "red",
                border: "0.1rem solid red",
            })
            $(".d8 .img3").attr("src","img/yes.png");
            neirong = $(".d8").html();
            neirong = "明细"
        })

        $(".d9").on("click",function(){
            $(".d8").css({
                color: "rgb(139, 138, 138)",
                border: "0.1rem solid rgb(139, 138, 138)",
            })
            $(".d8 .img3").attr("src","");
            $(".d9").css({
                color: "red",
                border: "0.1rem solid red",
            })
            $(".d9 .img3").attr("src","img/yes.png");
            // neirong = $(".d9").html();
            // console.log(neirong)
            neirong = "酒"
        })

        console.log(xinxi,taitou,neirong)

        $(".d002").on("click",function(){
            localStorage.xinxi = xinxi;
			localStorage.taitou = taitou;
			localStorage.neirong = neirong;
        })

        $(".d3").click(function(){
            localStorage.xinxi = xinxi;
			localStorage.taitou = taitou;
			localStorage.neirong = neirong;
			window.location.href="订单.html";
		})
    </script>
</body>
</html>